import React, { useState } from 'react';
import { Spin, Button } from 'antd';

const MySpin: React.FC = () => {
  const [size, setSize] = useState<'small' | 'default' | 'large'>('default');
  const [fullscreen, setFullscreen] = useState(false);
  const [tip, setTip] = useState('');

  const mySetFullscreen = () => {
    setFullscreen(true);

    setTimeout(() => {
      setFullscreen(false);
    }, 3000);
  };

  const myCustomTip = () => {
    setTip('自定义');
    mySetFullscreen();
  };

  return (
    <div>
      <div>
        <Button onClick={() => setSize('default')}>普通</Button>
        <Button onClick={() => setSize('large')}>大</Button>
        <Button onClick={() => setSize('small')}>小</Button>
        <Button onClick={() => setFullscreen(false)}>居中</Button>
        <Button onClick={mySetFullscreen}>全屏</Button>
        <Button onClick={myCustomTip}>自定义</Button>
        <Button onClick={() => setTip('')}>清空</Button>
      </div>
      <Spin size={size} fullscreen={fullscreen} tip={tip} />
    </div>
  );
};

export default MySpin;
